import React from 'react'
import './index.css'
export default function Footer({ todoList, setTodoList }) {
  const checkAllHandle = (e) => {
    const newTodoList = todoList.map(item => { return { ...item, done: e.target.checked } })
    setTodoList(newTodoList)
  }
  const deleteHandle=()=>{
    const newTodoList=todoList.filter(item=>!item.done)
    setTodoList(newTodoList)
  }
  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox"
          onChange={checkAllHandle}
          checked={todoList.reduce((p, c) => c.done ? p + 1 : p, 0) === todoList.length && todoList.length > 0} />
      </label>
      <span>
        <span>已完成{todoList.reduce((p, c) => c.done ? p + 1 : p, 0)}</span> / 全部{todoList.length}
      </span>
      <button onClick={deleteHandle} className="btn btn-danger">清除已完成任务</button>
    </div>
  )
}
